<template>
  <div class="cart-container">
    <s-header :name='"购物车"' :noback="true" />
    <div class="cart-body">
      <van-checkbox-group class="cart-item" v-model="checkedIds" ref="checkboxGroup" @change="groupChange">
        <van-cell-group>
          
          
          <van-cell style="padding:0" :border="false" v-for="item in cartList" :key="item.id">
            <van-swipe-cell>

              <van-checkbox
                  :name="item.id"
                  checked-color="#f2140c"
                  class="item-box"
                >
                  <van-card
                    :price="item.productPrice"
                    :title="item.productName"
                    :thumb="item.productPic"
                  >
                    <template #num>
                      <van-stepper
                        v-model="item.productQuantity"
                        :max="5"
                        integer
                        @change="onChange(item)"
                        style="margin-top: -2vw;"
                        @click.native.stop="() => {}"
                      />
                    </template>
                  </van-card>
                  <template #right>
                    <van-button square text="删除" type="danger" class="delete-button" />
                  </template>
                
                </van-checkbox>
          </van-swipe-cell>
          </van-cell>
        </van-cell-group>
        </van-checkbox-group>
        <van-submit-bar
            :price="subPrice"
            button-text="结 算"
            button-color="#f2140c"
            @submit="onSubmit"
            class="cart-sub"
          >
          <van-checkbox
            v-model="checkAll"
            checked-color="#f2140c"
            @click="allCheck"
          >
            全选
          </van-checkbox>
        </van-submit-bar>
      </div>
      <nav-bar></nav-bar>
    </div>
</template>

<script>

import { getCartList } from '@/api/cart'
import { mapGetters } from 'vuex';
import  sHeader  from '@/components/SHeader';
import  NavBar  from '@/components/NavBar';
import { Toast } from 'vant';

export default {
  name: 'CartView',
  data() {
    return {
      checkAll: false,
      canCheckNum: 0,
      checkedIds: [],
      cartList: [],
    }
  },
  components: {
    sHeader,
    NavBar
  },
  computed: {
    ...mapGetters([
      'id',
    ]),
    subPrice() {
      let sum = 0;
      console.log(this.cartList);
      console.log(this.checkedIds);
      let _list = this.cartList.filter(item => this.checkedIds.includes(item.id));
      console.log(_list);
      _list.forEach(item => {
        
        sum += item.productQuantity * 100 * item.productPrice;console.log(sum);
      })
      return sum;
    }
  },
  created() {
    localStorage.removeItem("cartItem")
    this.canCheckNum=0
    this.onload()
  },
  methods: {
    onload() {
      getCartList({id: this.id}).then(res =>{
        if(res.code === 200) {
          this.cartList = res.data;
          this.canCheckNum = this.cartList.length;
        }
      })
    },
    groupChange(result) {
      if (result.length == this.cartList.length) {
        this.checkAll = true
      } else {
        this.checkAll = false
      }
      this.checkedIds = result
    },
    allCheck() {
      if (this.checkAll) {
        this.checkedIds = this.cartList.map(item => item.id)
      } else {
        this.checkedIds = []
      }
    },
    onChange(val) {
      console.log(val);
    },
    onSubmit() {
      if(this.checkedIds.length != 0){
        localStorage.setItem("cartItem", this.checkedIds);
        this.$router.push({ path: '/create-order'})
      } else {
        Toast("您还没有选择商品哦！")
      }
      
      // this.$router.push({ path: '/create-order'})
    },
  },
}
</script>

<style lang="scss" scoped>
  .cart-container {
    background: #f9f9f9;
    .block {
      height: 50px;
    }
    
    .cart-body {
      .cart-item {
        
        margin: 3vw 0;

        .item-box {
          padding: 2vw 4vw;
          :deep() .van-checkbox__label {
            width: 100%;
            color: aliceblue;
          }
          
          .delete-button {
            height: 100%;
          }
        }
      }
      
    }
    .cart-sub {
      margin-bottom:50px
    }
  }
</style>